<template>
 <div class="dinwei">
          <div class="header">
            <img src="../../assets/image/logo.png" alt="">
            <h1>添加新章节</h1>
        </div>

         <div class="container">
                <div class="content">
             <quill-editor v-model="article.chaptercontent"></quill-editor>
            </div>
                <div class="footer">
                      
                  <div class="footerleft">
                         <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入本章标题"
                            v-model="article.chaptertitle">
                        </el-input> 
                  </div>

                  <div class="footerright">
                       <el-button type="primary" plain  @click="putnewarticle">确认提交</el-button>
                  </div>    
          </div>
         </div>
  
 </div>
</template>
<script>
  export default {
    data() {
      return {
          article:{
              chaptercontent:"",
              chaptertitle:'',
              articleid:0,
              chapterid:0,
          },
      }
    },

    created(){
      this.article.chapterid=this.$store.state.chapter.chapterid
      this.article.chaptertitle=this.$store.state.chapter.chaptertitle
      this.article.chaptercontent=this.$store.state.chapter.chaptercontent
      this.article.articleid=this.$store.state.chapter.articleid
    },
   
    methods:{

      //提交修改后的章节
      async putnewarticle(){
        if(this.article.chaptercontent.trim()&&this.article.chaptertitle.trim()){
         let data=await this.axios.post("chapter/xiugaichapter",this.article) 
        //  console.log(data)  
         if(data.data.status==200){
           this.article.chaptercontent=""
           this.article.chaptertitle=""
           this.$message.success("修改成功，等待审核")
            this.$router.push(`/book/${this.article.articleid}`)
           return
         }
         return  this.$message.error("提交失败，检查后重新提交")
        }
        return  this.$message.error("提交失败，检查后重新提交")
      },
  },
  }
</script>

<style scoped lang="less">
.dinwei{
    width:100%;
    position: relative;
    min-height: 100vh;
    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);
     .header{
        padding-left: 200px;
        padding-right: 200px;
        height:100px;
        max-width: 100vw;
        background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
        position: relative;
        display: flex;
        img{
            flex: 2;
            height: 100px;
            display: inline-block;
        }
        h1{
            flex: 3;
            color: #2ed573;
            display: inline-block;
            text-align: center;
            height:100px;
            line-height: 100px;
            letter-spacing:20px;
        }
    }
   
  .container {
    padding: 20px 50px;
  .content {
    quill-editor {

    }
  }

 .footer {
   display: flex;
   margin-top: 20px;
   height: 30px;
    .footerleft{
      flex:1;
      padding: 5px 10px;

    }
    .footerright{
      flex:2;
      padding: 10px 20px;
    }
  }
}
     
}

</style>

